v-model 資料雙向綁定/各種表單運用

v-model資料雙向綁定通常用在表單元素上。
資料雙向綁動的意思就是資料會同步更新在HTML和data中。

各種表單運用

input

最常見的input文字框，加上v-model="message"後，這個文字輸入框就會自動與data雙向綁定。

<div id="app">
    <input type="text" v-model="message" placeholder="輸入文字">
    <p>{{message}}</p>
</div>

var vm = Vue.createApp({
    data(){
        return{
            message: 'hello'
        }
    }
});

vm.mount('#app');

當輸入新文字到input內，data中的message也會動態被更改並呈現到{{message}}上

textarea

textarea 常用在意見回饋等地方，使用方法和input一模一樣!

<div id="app">
    <textarea v-model="message" placeholder="輸入文字"></textarea>
    <p>{{message}}</p>
</div>

radio(單選)

<div id="app">
    <div>
        <input type="radio" id="one" value="1" v-model="picked">
        <label for="one"> One </label>
    </div>
    <div>
        <input type="radio" id="two" value="2" v-model="picked">
        <label for="two"> Two </label>
    </div>
</div>
//兩個的 `v-model` 都對應到 picked

var vm = Vue.createApp({
    data(){
        return{
           picked: 1
        }
    }
});
vm.mount('#app');
//這裡表示，data內 picked 的預設值是 1

當我們選取input時，data內的資訊就會動態更新。

checkbox(複選)

其實複選跟單選一樣，一樣是選取後動態更新，但因為是複選所以沒辦法只是簡單的 true/false ，需要使用陣列。

<div id="app">
    <input type="checkbox" id="one" value="1" v-model="checkNums">
    <label for="one"> One </label>
    <input type="checkbox" id="two" value="2" v-model="checkNums">
    <label for="two"> Two </label>
    <input type="checkbox" id="three" value="3" v-model="checkNums">
    <label for="three"> Three </label>
    <input type="checkbox" id="four" value="4" v-model="checkNums">
    <label for="four"> Four </label>
    <input type="checkbox" id="five" value="5" v-model="checkNums">
    <label for="five"> Five </label>

    <P>Checked Numbers: {{checkNums}}</p>
</div>

var vm = Vue.createApp({
    data(){
        return{
           checkNums= [];
        }
    }
});
vm.mount('#app');
//這裡表示，data內 checkNums 的預設值為空陣列(預設沒有選取任何東西)

上面是把選取起來的值動態更新到data內，然後data的預設為空陣列(預設沒有選取任何東西)。
除了這個，checkbox複選 的運用也可以用在另一個情境:

<div id="app">
    <input type="checkbox" id="checkbox" v-model="isChecked" true-value="已選擇" false-value="未選擇">
    <label for="checkbox"> check </label>

    <p>status: {{isChecked}}</p>
</div>

var vm = Vue.createApp({
    data(){
        return{
           isChecked= false;
           //這個時候上方的 `{{isChecked}}` 是會用 true/false切換，如果想要讓它顯示不同的資料可以在上面加 `true-value` `false-value`
        }
    }
});
vm.mount('#app');
//這裡表示，data內 isChecked 的預設值為false

select 下拉選單

<div id="app">
    <select v-model="selected">
        <option disable value="">請選擇</option>
        <option>One</option>
        <option>Two</option>
        <option>Three</option>
     </select>

     <p> Selected: {{selected || '未選擇'}} </p>
 </div>

const vm = Vue.createApp({
    data(){
        return{
            selected: '' ;
        }
    }
});
vm.mount('#app');

透過 v-for 製作下拉選單的選項

<select v-model="selected">
        <option disable value="">請選擇</option>
        <option :value="item" 
        v-for="item in selectData" 
        :key="item.id">
        {{item}}
        </option>
</select>

讓select下拉選單變多選

在select加上mutiple
透過shift/cmd/ctrl來進行多選

<select v-model="selected" mutiple>
        <option disable value="">請選擇</option>
        <option :value="item" 
        v-for="item in selectData" 
        :key="item.id">
        {{item}}
        </option>
</select>

v-model 修飾子

修飾子會以.的方式，加在指令後面。

.lazy

在我們前面的文字輸入例子中，只要敲一次鍵盤就會觸發一次input事件，所以會看到邊輸入時，下方文字也跟者一起更改。如果只想要在輸入完後再更改呢? 我們就要把input事件改為change事件。 方法就是在後面加上.lazy

加上後只有在完成輸入(確定移開input)才會觸發。

.number

在input輸入框中，雖然輸入數字，但實際上由DOM API取出的時候都會是以 字串形式出現。如果要讓他為數值，可以加上.number。

.trim

針對某個輸入框，想要過濾掉空白字元時可以使用。

與v-bind的運用

v-bind 可以控制屬性，我們可以透過 v-bind 來控制 是否開啟 disable

 <input type="text" :disabled="isdisabled" v-model="message" placeholder="輸入文字">